<template>
  <div class="base-operation-btns">
    <el-dropdown class="dropdown" v-if="btnArrShow.length > 1">
      <span class="cur-point">
        {{$t('common.base.more')}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
        <el-dropdown-item v-for="(btnData, btnIndex) in btnArrShow" :key="btnData.key || btnIndex">
          <div
            class="dropdown-btn"
            :class="{
              'not-allow-edit-btn': btnData.isEdit,
              ...btnData.classObj
            }"
            ::class="btnData.class"
            @click.stop.prevent="btnData.click && btnData.click(extraData, {btnData, btnIndex})"
          >{{btnData.name}}</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div v-else>
      <div :key="btnData.key || btnIndex" v-for="(btnData, btnIndex) in btnArrShow">
        <slot name="eachBtn" :data="btnData" :btn-index="btnIndex">
          <div>
            <template v-if="!btnData.tooltip || !btnData.tooltip.show(extraData, {btnData, btnIndex})">
              <RenderButton :btn-data="btnData" :btn-index="btnIndex" :extra-data="extraData" />
            </template>
            <el-tooltip
              v-else
              class="item"
              effect="dark"
              :content="getToolTipContent(extraData, {btnData, btnIndex})"
              placement="top">
              <RenderButton :btn-data="btnData" :btn-index="btnIndex" :extra-data="extraData" />
            </el-tooltip>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
const RenderButton = {
  functional: true,
  render(h, {props}) {
    const {btnData, btnIndex, extraData} = props;
    return h(
      'el-button',
      {
        class: {
          'each-btn': true,
          'not-allow-edit-btn': btnData.isEdit,
          ...(btnData.classObj || {})
        },
        props: {
          type: 'text',
          loading: btnData.loading
        },
        on: {
          click: (event) => {
            event.stopPropagation();
            event.preventDefault();
            if (btnData.click) {
              btnData.click(extraData, {btnData, btnIndex});
            }
          }
        }
      },
      [btnData.name]
    )
  }
}
export default {
  name: 'BaseOperationBtns',
  components: {
    RenderButton
  },
  props: {
    btnArray: {
      type: Array,
      default: () => []
    },
    extraData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    btnArrShow() {
      return this.btnArray.filter(v => v.show ? v.show(this.extraData) : true)
    }
  },
  methods: {
    getToolTipContent(extraData, {btnData, btnIndex}) {
      return typeof btnData.tooltip.content === 'function' ? btnData.tooltip.content(extraData, {btnData, btnIndex}) : btnData.tooltip.content
    }
  },
};
</script>

<style lang="scss" scoped>
  .lang-select-dropdown {
    margin-top: 0!important;
  }
  .cur-point {
    color: $color-primary-light-6;
    white-space: nowrap;
  }
  .dropdown-btn {
    color:#595959;
    .not-allow-edit-btn {
      color:#BFBFBF;
      cursor: not-allowed;
    }
  }
  .each-btn {
    color:$color-primary-light-6;
    .not-allow-edit-btn {
      color:#999;
      cursor: not-allowed;
    }
  }

</style>
